<template>
  <div class="pageHeader">
    <!-- <BreadCrumb :items="breadCrumb" /> -->
    <a-page-header :title="title" @back="back" :show-back="showBack">
      <template #subtitle v-if="subtitle">
        <slot name="subtitle" />
      </template>
      <template #extra>
        <a-space>
          <slot name="buts" />
          <slot />
        </a-space>
      </template>
    </a-page-header>
    <a-divider :margin="0" />
    <!-- <hr color="#ccc" size="1px" /> -->
  </div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue';
import { useRouter } from 'vue-router';

const props = withDefaults(
  // 参数说明
  defineProps<{
    title: string; // title
    showBack?: boolean; // 是否显示Back按钮
    subtitle?: boolean; // 是否显示次标题
    breadCrumb?: string[]; // 面包屑
    emitBack?: boolean; // 自定义返回
  }>(),
  {
    showBack: false,
    emitBack: false,
    subtitle: false
  }
);
const emit = defineEmits(['back']);

const router = useRouter();

// 返回箭头
const back = () => {
  if (props.emitBack) emit('back');
  else router.back();
};

defineExpose({ back });
</script>

<style lang="less" scoped>
.pageHeader {
  background-image: 'radial-gradient(var(--color-fill-3) 1px, rgba(0, 0, 0, 0) 1px)';
  background-size: '16px 16px';
  padding: '28px';
}
</style>
